<template>
  <view>
    <cu-cell
      :title="label"
      :required="required"
      link
      :placeholder="placeholder"
      @click="open"
      :description="description"
    ></cu-cell>
    <uni-drawer ref="userDrawer" mode="right" :mask-click="true" :width="330">
      <view>
        <scroll-view scroll-y="true" class="user-scroll-wrap">
          <view class="container-list">
            <view
              class="common"
              v-for="(item, index) in libIdData"
              @click="handleItemClick(item, index)"
              :key="item.libId"
            >
              <label class="info-content">
                <view class="uni-inline-item">
                  <!-- 单选 -->
                  <view>
                    <image
                      v-if="item.checked"
                      class="select-icon"
                      src="/static/images/work/dbd/selected_yes.png"
                      mode="aspectFit"
                    ></image>
                    <image
                      v-else
                      class="select-icon"
                      src="/static/images/work/dbd/selected_no.png"
                      mode="aspectFit"
                    ></image>
                  </view>
                  <view class="dept-name"> {{ item.analysisItem }}</view>
                </view>
              </label>
            </view>
          </view>
        </scroll-view>
        <view class="btn">
          <view class="bottom-btn-wrap">
            <view class="selected-text" v-if="selectedData.length > 0">已选择：{{ selectedData.length }}条数据</view>
            <view class="selected-text" v-else>未选择</view>
            <button class="confirm-btn" type="primary" @click.stop="backConfirm">确定</button>
          </view>
        </view>
      </view>
    </uni-drawer>
  </view>
</template>

<script>
import CuCell from '@/components/cu-cell/cu-cell.vue'
import { getGasLibs } from '@/api/spw/ticketApply'
export default {
  name: 'UserSelector',
  components: {
    CuCell
  },
  model: {
    prop: 'value',
    event: 'update:value'
  },
  props: {
    value: {
      type: [Number, Array, String]
    },
    placeholder: String,
    label: String,
    title: String,
    required: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    getGasLibs({ pageSize: 10000 }).then(({ rows }) => {
      this.libIdData = rows.map((item) => {
        item.checked = false
        return item
      })
      this.setInitData()
    })
  },
  data() {
    return {
      libIdData: []
    }
  },
  methods: {
    handleItemClick(item) {
      item.checked = !item.checked
    },
    async backConfirm() {
      this.update()
      this.$refs.userDrawer.close()
    },
    open() {
      this.setInitData()
      this.$refs.userDrawer.open()
    },
    setInitData() {
      const temp = {}
      // 判断this.value是不是数组
      if (Array.isArray(this.value)) {
        this.value.forEach((item) => {
          temp[item] = true
        })
      } else if (this.value) {
        temp[this.value] = true
      }
      this.libIdData.forEach((item) => {
        item.checked = !!temp[item.libId]
      })
    },
    update() {
      const ids = this.selectedData.map((item) => item.libId)
      this.$emit('update:value', ids)
    }
  },
  computed: {
    selectedData() {
      return this.libIdData.filter((item) => item.checked)
    },
    description() {
      const temp = {}
      // 判断this.value是不是数组
      if (Array.isArray(this.value)) {
        this.value.forEach((item) => {
          temp[item] = true
        })
      } else if (this.value) {
        temp[this.value] = true
      }
      const arr = []
      this.libIdData.forEach((item) => {
        if (temp[item.libId]) {
          arr.push(item)
        }
      })
      return arr.map((item) => item.analysisItem).join('、')
    }
  }
}
</script>
<style lang="scss" scoped>
.example-body {
  padding: 10px;
}

.scroll-view {
  /* #ifdef H5 */
  padding-top: 88rpx;
  /* #endif */
  /* #ifndef APP-NVUE */
  width: 100%;
  height: 100%;
  /* #endif */
  flex: 1;
}

// 处理抽屉内容滚动
.scroll-view-box {
  flex: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(100vh - 150rpx - var(--status-bar-height) - constant(safe-area-inset-top));
  height: calc(100vh - 150rpx - var(--status-bar-height) - env(safe-area-inset-top));
  /* #ifdef H5 */
  height: calc(100vh - 238rpx - var(--status-bar-height) - env(safe-area-inset-top));
  /* #endif */
}

.info {
  padding: 15px;
  color: #666;
}

.info-text {
  font-size: 14px;
  color: #666;
}

.checkbox {
  position: relative;
  margin-left: 10rpx;
  margin-right: 0px;
  .color {
    color: #00aaff;
    background-color: #00aaff;
  }
  .txt {
    font-size: 44rpx;
    width: 100%;
    height: 100%;
    display: flex;
  }
}
.container-list {
  .common {
    background-color: #fff;
    border-bottom: 1rpx solid #f4f4f4;
    .content {
      display: flex;
      align-items: center;
      width: 100%;
      position: relative;
      font-size: 32rpx;
    }
  }
}

.btn {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  padding: 10px;
  background-color: #fff;
  opacity: 0.9;
  width: 100%;
  box-shadow: 0 0px 4px 2px rgba(0, 0, 0, 0.1);
  .bottom-btn-wrap {
    display: flex;
    align-items: center;
    .selected-text {
      flex: 1;
      font-size: 24rpx;
      color: #333333;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .arrow-up {
      padding-left: 20rpx;
    }
    .confirm-btn {
      font-size: 32rpx;
      margin-left: 20rpx;
      height: 70rpx;
      line-height: 70rpx;
      background-color: #2ac0c8;
      color: #fff;
      border-radius: 0;
      min-width: 200rpx;
      &:after {
        display: none;
      }
    }
  }
}

.select-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 30rpx;
}

.info-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 20rpx;

  .dept-name {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
  }
}

::v-deep {
  .uni-inline-item uni-text:last-child {
    margin: 0;
  }
}

.user-scroll-wrap {
  height: calc(100vh - 120rpx);
}
</style>
